<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'

defineOptions({ name: 'ContentWrap' })

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('content-wrap')

defineProps({
  title: propTypes.string.def(''),
  message: propTypes.string.def(''),
  shadow: propTypes.string.def('never'),
  button: propTypes.string.def('')
})

defineEmits(['buttonClick'])
</script>

<template>
  <ElCard :class="[prefixCls, 'mb-15px']" :shadow="shadow">
    <template v-if="title" #header>
      <div class="flex items-center justify-between h-10px">
        <div>
          <span class="text-16px">{{ title }}</span>
          <ElTooltip v-if="message" effect="dark" placement="right">
            <template #content>
              <div class="max-w-200px">{{ message }}</div>
            </template>
            <Icon :size="14" class="ml-5px" icon="ep:question-filled" color="#CCC" />
          </ElTooltip>
        </div>

        <span
          class="text-[var(--secondary-text-color)] text-14px cursor-pointer"
          v-if="button"
          @click="$emit('buttonClick')"
          >{{ button }}</span
        >
      </div>
    </template>
    <div>
      <slot></slot>
    </div>
  </ElCard>
</template>
